{{#extend 'css'}}
    <meta name="globalsign-domain-verification" content="aLdFZy9cP34kpXXTWeRLjLZhNd7Mm8Kz60jFu_s65g" />
    <style>
        .split .photographer2 .icon {
            width: 35px;
            height: 34px;
            background-image: url(/images/index/gallery_2x.png)
        }
        .split .contest .icon {
            width: 36px;
            height: 30px;
            background-image: url(/images/index/contest_2x.png)
        }
        .footer .footer_wrap2 {
            width:94%;
            margin:0 3%;
            overflow: hidden;
            padding: 40px 0px
        }
        .footer .footer_wrap2 .about-title {
            font-size: 14px;
        }

        .footer .footer_wrap2 .column {
            display: inline-block;
            float: left;
            text-align: left;
        }
        .footer .footer_wrap2 .logo {
            display: none;
        }
        .footer .footer_wrap2 .column.about {
            color: #525558;
        }
        .footer .footer_wrap2 .bottom-slide {
            margin-left: 10px;
            margin-right: 10px;
        }
        .footer .footer_wrap2 .bottom-slide:first-child{
            margin-left: 0;
        }
        .footer .footer_wrap2 .record-number {
            margin-left: 30px;
        }

        .column.about {
            float: left;
        }
        .footer .footer_wrap2 .column.bottom-1 {
            float:left;
        }
        p+p {
            margin-top: 2.6em;
        }
        .bottom-slide a {
            color: #000;
        }
        .communication-content, .downloads-content {
            padding-top: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .communication-content .com-per {
            float: left;
            font-size: 12px;
        }
        .communication-content .com-per div{
            padding : 5px 0;
            text-align: center;
        }
        .communication-content .com-per img{
            display: block;
        }
        .communication-content .com-weixin-div {
            margin-left: 50px;
        }
        .footer_wrap2 .column.bottom-2{
            float:right;
        }
        .footer_wrap2:after{
            display: block;
            content: ' ';
            clear:both;
            height:0;
        }
        @media only screen and (max-width: 755px){
            .footer{
                height :550px;
            }
            .footer .footer_wrap2 .column.bottom-1,.footer_wrap2 .column.bottom-2 {
                margin-bottom:30px;
                width: 100%;
            }
            .footer .footer_wrap2 {
                width: 100%;
                padding: 40px 15px;
            }
            .footer .footer_wrap2 .record-number{
                margin-left:0;
            }
            .record-number {
                display: block;
                margin: 15px 0;
            }
            p+p {
                margin-top: 1.4em;
            }
        }
    </style>
{{/extend}}
<div class="bg-header" style='height: -webkit-calc(100vh - 235px);-moz-calc(100vh - 235px);height: calc(100vh - 235px);<c:if test="${not empty bg}">background-image:url(${bg.url});</c:if>">'>
    <div class="top-wrapper" id="top-wrapper">
        <div class="top">
            <div class="logo">
                <img src="../../images/icon/shijue-logo.svg" onerror="this.onerror=null; this.src='/images/icons/icon-shijue.png'" alt="">
            </div>
            <div class="logreg">
                <a onclick='login()' href="javascript:void(0);" class="item login">
                    <span class="icon icon-customer"></span>登录</a>
                <a onclick='register()'href="javascript:void(0);" class="item reg">
                    <span class="icon icon-lock"></span>注册</a>
            </div>
        </div>
    </div>
    <div class="slogan">
        <div class="header">
            <div class="sl-logo"></div>
        </div>
        <form class="flexbox sr-area" action="/community/search?searchtype=works" method="GET">
            <div class="flex search-shadow">
                <input type="hidden" name="search" value="works" />
                <input class="sr-input" type="text" name="key" placeholder="从灵感里发现">
            </div>
            <button type="submit" class="sr-btn">
                <div class="icon-search"></div>
            </button>
        </form>
    </div>
    <div class="row author">
        <div class="wrap p-h-sm">
            <a href='/community/photo-details/${bg.id}' target="_blank">${bg.title}</a>
            <a href="/community/user-details/${bg.uploaderId}" target="_blank">@${bg.uploaderName}</a>
        </div>
    </div>
</div>

<div class="row home-tab adjust">
    <div class="flexbox index-menue-tab">
        <div class="flex share share-lxx">
            <div class="title">
                <a href="/community/index.html?upload=true" class="zc-btn"><img src="../../images/icon/share.svg"></a>
                <div class="zc-icon"><span class="fontw50-18">分享作品</span></div>
                <div class="fontw40-13">炫出你最好的作品</div>
            </div>
        </div>
        <div class="flex share find">
            <div class="title">
                <a href="/community/discovery" class="zc-btn"><img src="../../images/icon/find.svg" style="width:31px; margin: 26px auto;"></a>
                <div class="zc-icon zc-icon-w"><span class="fontw50-18">灵感头条</span></div>
                <div class="fontw40-13">寻找灵感的海量资料库</div>
            </div>

        </div>
        <div class="flex share contest">
            <div class="title">
                <!--             seek.svg -->
                <a href="/page/contestv/index" class="zc-btn"><img src="../../images/icon/icon-prize-line.svg" style="width:auto;height:33px;"></a>
                <!--                 <div class="zc-icon"><span class="fontw50-18">寻找素材</span></div> -->
                <!--                 <div class="fontw40-13">找到你需要的素材，提高工作效率</div> -->
                <div class="zc-icon"><span class="fontw50-18">精彩活动</span></div>
                <div class="fontw40-13">参与精选设计大赛</div>
            </div>
        </div>

        <div class="flex share veer">
            <div class="title zc-br">
                <a href="http://www.veer.com/?utm_source=shijueme&utm_medium=logo&chid=812" target="_blank" class="zc-btn"><img
                        src="../../images/icon/icon_veer.svg" style="width:88px; margin-top: 0;"></a>
                <div class="zc-icon zc-icon-w"><span class="fontw50-18">版权素材</span></div>
                <div class="fontw40-13">为你优选购图更简单</div>
            </div>
        </div>

        <div class="flex share px500">
            <div class="title zc-br">
                <a href="http://500px.me/community/discover/rating?v=1" target="_blank" class="zc-btn"><img src="../../images/icon/icon_500px.svg" style="width:88px; margin-top: 0;"></a>
                <div class="zc-icon zc-icon-w"><span class="fontw50-18">摄影社区</span></div>
                <div class="fontw40-13">追寻摄影的灵感</div>
            </div>
        </div>
        <div style="clear:both;"></div>


    </div>
</div>

<div class="home-middle">
    <div class="title">与众不同的设计社区</div>
    <div class="desc">让我们因设计成为朋友</div>
</div>

<div class="row row-mobile sucai-result adjust">
    <div class="pics clearfix overflow">
    </div>
</div>

<div class="home-bottom">
    <div class="row adjust">
        <div class="logo-bottom">
            <div class="logo-bottom-line">
                <div class="logo-bottom-image">
                    <img src="images/icon/logo-bottom.svg" style="width:29px;height:26px;">
                </div>
            </div>
        </div>

        <div class="flexbox">
            <div class="flex">
                <a onclick='register()' href="javascript:void(0);" class="btn register">现在注册</a>
            </div>
            <div class="flex">
                <a href="/community/rating" class="btn more">更多作品</a>
            </div>
        </div>
    </div>
</div>


<section class="footer">
    <div class="footer_wrap2">
        <div class="column about bottom-2">
            <div class="communication-div"><p class="about-title"><strong>社交媒体</strong></p>
                <div class="communication-content">
                    <div class="com-per com-weibo-div"><img class="com_weibo" width="100" src=""> <div>官方微博</div>
                    </div>
                    <div class="com-per com-weixin-div"><img class="com_weixin" width="100" src="">
                        <div>微信订阅号</div></div>
                </div>
            </div>
        </div>
        <div class="column about bottom-1" style=""><p class="about-title"><strong>视觉ME设计社区</strong></p>

            <p class="description">视觉中国设计师社区是一个致力于设计作品分享、发现、售卖的专业平台。</p>

            <p class="cute description">这里有寻找灵感的海量资料库，也可以参与精彩纷呈的设计大赛并获得收益和提升。</p>

            <p></p>

            <div class="footer-about-link"><span class="bottom-slide"><a href="/community/support">帮助中心</a> </span> |
                <span class="bottom-slide"><a href="/service-terms/index">服务条款</a> </span> |
                <span class="bottom-slide"><a href="/page/contacts/index">联系我们</a> </span>
                <span class="record-number">津ICP备13002055号-2</span></div>
            <p></p></div>
    </div>
</section>

{{#extend 'scripts'}}
    <script>
        function login(){
            location.href = '//{{$DOMAIN}}/user/login?redirect=' + encodeURIComponent(location.href + 'home');
        }
        function register(){
            location.href = '/user/registerMe?redirect=' + encodeURIComponent(location.href + 'home');
        }
        (function(window){
            "use strict";
            function hasClass(el, className) {
                if (el.classList)
                    return el.classList.contains(className)
                else
                    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
            }

            function addClass(el, className) {
                if (el.classList)
                    el.classList.add(className)
                else if (!hasClass(el, className)) el.className += " " + className
            }

            function removeClass(el, className) {
                if (el.classList)
                    el.classList.remove(className)
                else if (hasClass(el, className)) {
                    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
                    el.className=el.className.replace(reg, ' ')
                }
            }
            window.onscroll = function() {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var topWrapper = document.getElementById('top-wrapper');
                if (scrollTop > 50) {
                    addClass(topWrapper,'active')
                } else {
                    removeClass(topWrapper,'active')
                }
            }
        })(window)
    </script>
    <script src="{{$CDN}}/master/apps/js/index_unlogin.js?dc={{$VERSION}}"></script>
{{/extend}}